<template>
	<view class="recharCard">
		<u-navbar
			title="充值卡"
			:border-bottom="false" 
			:background="backgroundStyle"
			title-color="#000"
		></u-navbar>
		<view class="user-box">
			<u-avatar :src="userInfo.avatarUrl" size="80" style="margin-right: 10px;"></u-avatar>
			<view class="user-box__info"style="display: flex; flex-direction: column;">
				<view class="user-box__info__username">{{userInfo.nickname}}</view>
				<view class="user-box__info__realname">2021-7-15到期 </view>
			</view>
		</view>
		<view class="content-box">
			
			<view class="content-box__title">选择充值类型</view>
			<scroll-view :scroll-x="true">
				<view class="card-box">
					
						<view class="card-box__item--choosed">
							<view class="card-box__item__type">连续包月</view>
							<view class="card-box__item__charge">
								<view class="card-box__item__charge__symbol">¥</view>
								<view class="card-box__item__charge__value">130</view>
							</view>
							<view class="card-box__item__message">¥13/月</view>
						</view>
						
						<view class="card-box__item">
							<view class="card-box__item__type">连续包月</view>
							<view class="card-box__item__charge">
								<view class="card-box__item__charge__symbol">¥</view>
								<view class="card-box__item__charge__value">130</view>
							</view>
							<view class="card-box__item__message">¥13/月</view>
						</view>
						
						<view class="card-box__item">
							<view class="card-box__item__type">连续包月</view>
							<view class="card-box__item__charge">
								<view class="card-box__item__charge__symbol">¥</view>
								<view class="card-box__item__charge__value">130</view>
							</view>
							<view class="card-box__item__message">¥13/月</view>
						</view>
						<view class="card-box__item">
							<view class="card-box__item__type">连续包月</view>
							<view class="card-box__item__charge">
								<view class="card-box__item__charge__symbol">¥</view>
								<view class="card-box__item__charge__value">130</view>
							</view>
							<view class="card-box__item__message">¥13/月</view>
						</view>
					
			
				</view>
			</scroll-view>
			<view class="content-box__title">支付方式</view>
			<view class="pay-box">
					<view class="pay-box__list" v-for="(authority,index) in authorList" :key="index" @click="choosePayType(index)">
						<image class="pay-box__list__icon" :src="authority.icon" mode="aspectFit"></image>
						<view class="pay-box__list__content">
							<view class="pay-box__list__content__name">
								{{authority.name}}
							</view>
									
							<view  class="pay-box__list__content__choosebox">
								<image v-if="payType==index"  src="/static/mine/payment/choosed.svg" mode="aspectFit" ></image>
								<image v-else  src="/static/mine/payment/circle.svg" mode="aspectFit" ></image>
							</view>
						</view>
			
					</view>
			</view>
		</view>

		<view class="bottom-box">
			<view class="bottom-box__all"> 
				<view class="bottom-box__all__text">总计</view>
				<view class="bottom-box__all__value">11</view>
			</view>
			<view class="bottom-box__submit">支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				backgroundStyle:{'backgroundColor':'transparent'},
				authorList:[
					{
						name:"支付宝支付",
						value:2,
						icon:'/static/mine/payment/alipay.svg',
					},{
						name:"微信支付",
						value:3,
						icon:'/static/mine/payment/wechat.svg',
					},{
						name:"京东支付",
						value:4,
						icon:'/static/mine/payment/jingdong.svg',
					}
				],
				payType:0,
			}
		},
		computed:{
			userInfo:function(){
				console.log("computed:userInfo",this.$store.state.userInfo)
				return this.$store.state.userInfo
			}
		},
		methods: {
			choosePayType(index){
				this.payType=index;
			}
		}
	}
</script>

<style lang="less">
.recharCard{
	background-color: @uni-bg-color-grey;
}
.user-box{
	display: flex; 
	align-items: flex-start;
	padding: @uni-spacing-row-sm 2*@uni-spacing-col-lg  2*@uni-spacing-row-lg 2*@uni-spacing-col-lg;
	
	
	&__info{
		
		&__username{
			font-weight: bold;
			// color: @color-green;
		}
		&__realname{
			font-size: small;
		}
	}
	&__tohome{
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: @uni-font-size-sm;
		// color: @font-color-blue;
	}
}
.content-box{
	background-color: #fff;
	padding-top: @uni-spacing-row-lg;
	border-radius: @uni-border-radius-lg;
	&__title{
		margin: @uni-spacing-row-base @uni-spacing-col-lg;
		font-weight: bolder;
	}
}
.card-box{
	display: flex;
	flex-direction: row;
	width: 200%;
	&__item--choosed{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: @uni-spacing-row-x-lg;
		margin-left: @uni-spacing-col-base;
		border: @line-light-size solid @color-green;
		border-radius: @uni-border-radius-lg;
		background-color: rgba(111, 216, 224,0.1);
		
	}
	&__item{
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: @uni-spacing-row-x-lg;
		margin-left: @uni-spacing-col-base;
		border: @line-light-size solid @uni-border-color;
		border-radius: @uni-border-radius-lg;
		&__type{
			font-weight: bolder;
		}
		&__charge{
			display: flex;
			flex-direction: row;
			align-items: flex-end;
			margin-top: @uni-spacing-row-base;
			color:  @color-green;
			&__symbol{
				
			}
			&__value{
				font-size: @uni-font-size-x-lg;
			}

		}
		&__message{
			margin-top: @uni-spacing-row-lg;
			font-size: @uni-font-size-sm;
			color: @font-color-grey;
		}
		
	}
	&__item--first{
		padding: @uni-spacing-row-lg;
		border: @line-border-size solid @uni-border-color;
		border-radius: @uni-border-radius-lg;
	}
}
.pay-box{
	display: flex;
	flex-direction: column;
	
	&__title{
		margin: @uni-spacing-row-base @uni-spacing-col-lg;
		font-weight: bolder;
		
	}
	&__list{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0  @uni-spacing-col-lg;
		&__icon{
			height: @icon-lg;
			width: @icon-lg;
			margin:@uni-spacing-row-base @uni-spacing-col-lg;
		}
		&__content{
			flex: 1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: @uni-spacing-row-lg 0;
			border-bottom: @line-light-size solid @uni-border-color;
			&__choosebox{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: @icon-base;
				height: @icon-base;
				background-color:transparent;
	

			}
			
		}

	}
	&__list:hover{
		width: calc(100vw);
		transform: 2s;
		background-color: @uni-bg-color-hover;
		margin-left: 0;
		margin-right: 0;
		padding-right:  @uni-spacing-col-lg;
		padding-left:  @uni-spacing-col-lg;
	}
}
.bottom-box{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	padding: 0 0 0 @uni-spacing-col-lg;
	bottom: 0;
	width: calc(100vw);
	background-color: #fff;
	box-shadow: 0 -1px 3px rgba(84, 95, 117, 0.2);
	&__all{
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		&__text{
			color: @font-color-grey;
		}
		&__value{
			font-size: @uni-font-size-xx-lg;
			color: @font-color-blue;
		}
	}
	&__submit{
		padding-top: @uni-spacing-row-lg;
		padding-bottom:@uni-spacing-row-lg;
		padding-left:  @uni-spacing-row-x-lg;
		padding-right:  @uni-spacing-row-x-lg;
		text-align: center;
		background-color: @uni-bg-color-blue;
		font-size: @uni-font-size-lg;
		color: #fff;
	}
}
</style>
